<template>
  <div>
    <div class="text">编辑推荐</div>
    <div class="imgs">
      <ImgView v-for="item in recommend" :key="item.id" :item="item"
      @billboard-item="$emit('billboard-item',$event)"
     ></ImgView>
    </div>
    
    <div class="text">最新音乐</div>
    <div class="imgs">
      <MusicsView 
      :isShows="songId==keys.id  ? true : false"
      :paused="$attrs.paused"
      :class="{ current: songId === keys.id }" 
      :pauseds="$attrs.pauseds"
      v-for="keys in musics" :key="keys.id" :keys="keys"
      @change-musics-list="$emit('change-musics-list',$event)"
      >
      </MusicsView>
    </div>
    <img class="homeBomImg" src="../img/bgImg1.png" alt="">
  </div>
</template>

<script>
import ImgView from "@/components/ImgView.vue";
import MusicsView from "@/components/MusicsView.vue";
export default {
  props:{
    songId: Number,
  },
  components: {
    ImgView,
    MusicsView,
  },
  data() {
    return {
      recommend: [],
      musics:[]
    };
  },
  created() {
    console.log("created");
    this.$axios
      .get("http://localhost:3000/personalized?limit=6")
      .then((res) => {
        this.recommend = res.data.result;
      });
      this.$axios
      .get("http://localhost:3000/personalized/newsong?limit=20")
      .then((res) => {
        this.musics = res.data.result;
      });
  },
};
</script>

<style lang="scss"  scoped >

body{
    margin: 0;
    padding: 0;
}
.text {
  margin-top: 19rem;
  padding-left: 10rem;
  border-left: 3rem solid red;
}
.imgs{
    width:375rem;
    display: flex;
    flex-wrap: wrap;
}
.homeBomImg{
  width: 375rem;
}
</style>